<!doctype html>
<html lang="en">
<head>
    <title>Grid - Sorting</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="wijgrid provides sorting feature" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                allowSorting: true,
                data: [
                    [1, 'Malkin', 'Pit', 7, 2, 6, 8, 0, 29, '20:10', 2, 2, 24],
                    [2, 'Talbot', 'Pit', 7, 4, 2, 6, 4, 14, '16:35', 0, 0, 14],
                    [3, 'Zetterberg', 'Det', 7, 2, 4, 6, 3, 7, '22:15', 1, 2, 23],
                    [4, 'Franzen', 'Det', 7, 2, 2, 4, -1, 2, '19:27', 1, 1, 20],
                    [5, 'Rafalski', 'Det', 7, 1, 3, 4, 3, 0, '21:44', 1, 0, 5],
                    [6, 'Letang', 'Pit', 7, 1, 3, 4, -2, 0, '19:09', 1, 2, 11],
                    [7, 'Kennedy', 'Pit', 7, 2, 1, 3, 2, 0, '12:50', 0, 0, 17],
                    [8, 'Ericsson', 'Det', 7, 2, 1, 3, 1, 4, '16:04', 0, 0, 8],
                    [9, 'Staal', 'Pit', 7, 2, 1, 3, 0, 2, '18:20', 0, 1, 17],
                    [10, 'Fedotenko', 'Pit', 7, 1, 2, 3, 3, 0, '15:43', 0, 0, 15],
                    [11, 'Crosby', 'Pit', 7, 1, 2, 3, -3, 2, '18:39', 0, 1, 16],
                    [12, 'Lidstrom', 'Det', 7, 0, 3, 3, 4, 0, '1:06', 0, 1, 14],
                    [13, 'Hudler', 'Det', 7, 0, 3, 3, 2, 0, '11:30', 0, 1, 6],
                    [14, 'Hossa', 'Det', 7, 0, 3, 3, 0, 2, '18:37', 0, 0, 23],
                    [15, 'Abdelkader', 'Det', 3, 2, 0, 2, 2, 0, '7:15', 0, 0, 4],
                    [16, 'Filppula', 'Det', 7, 2, 0, 2, -1, 2, '18:40', 0, 0, 9],
                    [17, 'Stuart', 'Det', 7, 2, 0, 2, -3, 2, '22:10', 0, 0, 6],
                    [18, 'Gonchar', 'Pit', 7, 1, 1, 2, 0, 2, '22:42', 1, 1, 9],
                    [19, 'Kronwall', 'Det', 7, 1, 1, 2, 0, 8, '22:01', 1, 1, 8],
                    [20, 'Helm', 'Det', 7, 1, 1, 2, -1, 0, '14:15', 0, 0, 15],
                    [21, 'Datsyuk', 'Det', 3, 0, 2, 2, 1, 0, '18:53', 0, 1, 5],
                    [22, 'Leino', 'Det', 4, 0, 2, 2, 2, 0, '9:17', 0, 0, 6],
                    [23, 'Scuderi', 'Pit', 7, 0, 2, 2, 1, 0, '19:26', 0, 0, 1],
                    [24, 'Kunitz', 'Pit', 7, 0, 2, 2, -3, 4, '16:12', 0, 0, 12],
                    [25, 'Holmstrom', 'Det', 7, 0, 2, 2, -3, 2, '12:49', 0, 0, 9],
                    [26, 'Draper', 'Det', 4, 1, 0, 1, 0, 0, '6:59', 0, 0, 2],
                    [27, 'Cleary', 'Det', 7, 1, 0, 1, 1, 4, '16:45', 0, 0, 19],
                    [28, 'Samuelss.', 'Det', 7, 0, 1, 1, 1, 2, '14:35', 0, 1, 13],
                    [29, 'Guerin', 'Pit', 7, 0, 1, 1, -3, 4, '15:55', 0, 1, 20],
                    [30, 'Eaton', 'Pit', 7, 0, 1, 1, -6, 4, '18:27', 0, 0, 4],
                    [31, 'Sykora', 'Pit', 1, 0, 0, 0, 0, 0, '6:31', 0, 0, 0],
                    [32, 'Boucher', 'Pit', 1, 0, 0, 0, -1, 0, '11:01', 0, 0, 1],
                    [33, 'Dupuis', 'Pit', 6, 0, 0, 0, -2, 2, '8:20', 0, 0, 3],
                    [34, 'Satan', 'Pit', 6, 0, 0, 0, -4, 2, '8:56', 0, 0, 5],
                    [35, 'Gill', 'Pit', 7, 0, 0, 0, 2, 2, '18:23', 0, 0, 2],
                    [36, 'Maltby', 'Det', 7, 0, 0, 0, 1, 0, '9:07', 0, 0, 6],
                    [37, 'Lebda', 'Det', 7, 0, 0, 0, 1, 12, '11:08', 0, 0, 2],
                    [38, 'Cooke', 'Pit', 7, 0, 0, 0, 0, 10, '14:34', 0, 0, 7],
                    [39, 'Orpik', 'Pit', 7, 0, 0, 0, 0, 6, '20:05', 0, 0, 5],
                    [40, 'Adams', 'Pit', 7, 0, 0, 0, -3, 12, '9:59', 0, 0, 4]
                ],
                columns: [
                    { headerText: ''}, { headerText: 'Skaters' }, { headerText: 'Tm' }, { headerText: 'GP' },
                    { headerText: 'G' }, { headerText: 'A' }, { headerText: 'PTS' }, { headerText: '+/-' },
                    { headerText: 'PIM' }, { headerText: 'PPG' }, { headerText: 'PPA' }, { headerText: 'SOG' },
                    { headerText: 'SPCT' }
                ]
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Sorting</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div class="ui-widget ui-widget-header ui-corner-all">
                2009 Stanley Cup Finals
            </div>
            <table id="demo">
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
             To enable sorting, the allowSorting option should be set to true. Once the allowSorting option is set to true, you can determine the sort direction. In this sample, the sort direction is set to ascending.
            </p>
        </div>
    </div>
</body>
</html>
